/<template>
  <div class="goods">
    <!-- <div class="li"> -->
    <ul>
      <li v-for="item in goods" :key="item.id" @click="toDetail(item.id)">
        <img :src="item.img" alt="" />
        <div>
          <h3>{{ item.title }}</h3>
          <p>￥{{ item.price }}元</p>
        </div>
      </li>
    </ul>
    <!-- </div> -->
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      goods: [],
    };
  },
  mounted() {
    axios.get("/goods").then((res) => {
      console.log(res.data);
      this.goods = res.data;
    });
  },
  methods:{
    toDetail(id){
      this.$router.push({
        path:'/detail',
        query:{id}
      })
    }
  }
};
</script>

<style lang="scss">
.goods {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  li {
    width: 100%;
    height: 120px;
    display: flex;
    img {
      width: 100px;
      height: 100px;
      margin-right: 10px;
    }
  }
}
</style>